<div id='page-body'>
  <div class='row'>
    <p>
      If you still need to use moment.js, you can load this plugin to use moment to parse input dates.
    </p>
  </div>

  <div class='row'>
    <div class='container'>
      <div class='row'>
        <div class='col-sm-6'>
          <label for='datetimepicker1Input' class='form-label'>Simple picker</label>
          <div
            class='input-group'
            id='datetimepicker1'
            data-td-target-input='nearest'
            data-td-target-toggle='nearest'
          >
            <input
              id='datetimepicker1Input'
              type='text'
              class='form-control'
              data-td-target='#datetimepicker1'
              value='16.02.2022, 12:49 AM'
            />
            <span
              class='input-group-text'
              data-td-target='#datetimepicker1'
              data-td-toggle='datetimepicker'
            >
               <span class='fas fa-calendar'></span>
             </span>
          </div>
        </div>
      </div>
    </div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js'
            integrity='sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=='
            crossorigin='anonymous' referrerpolicy='no-referrer'></script>
    <script src='/6/js/plugins/moment-parse.js'></script>
    <script type='text/javascript'>
      tempusDominus.extend(tempusDominus.plugins.moment_parse, 'DD.MM.yyyy hh:mm a');
      const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));
    </script>
  </div>
  <pre>
<code class='language-js'>//example picker
//note that you can optionally provide the format to use.
tempusDominus.extend(tempusDominus.plugins.moment_parse, 'DD.MM.yyyy hh:mm a');
const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));</code>
</pre>
</div>

<div class='row'>
  <h3>How it works</h3>
  <p>
    This plugin overrides two picker functions <code>setFromInput</code> and <code>formatInput</code>.
  </p>
  <p>
    <code>setFromInput</code> parses and sets a date at the provided index with the textbox value.
  </p>
  <p>
    <code>formatInput</code> is the reverse, it takes a date time object and formats or parses it to a string.
  </p>
  <pre>
<code class='language-js'>//obviously, loading moment js is required.
declare var moment;
export const load = (option, tdClasses, tdFactory) => {
  tdClasses.Dates.prototype.setFromInput = function(value, index) {
    let converted = moment(value, option);
    if (converted.isValid()) {
      let date = tdFactory.DateTime.convert(converted.toDate(), this.optionsStore.options.localization.locale);
      this.setValue(date, index);
    }
    else {
      console.warn('Momentjs failed to parse the input date.');
    }
  }

  tdClasses.Dates.prototype.formatInput = function(date) {
    return moment(date).format(option);
  }
}</code>
</pre>
</div>

<div id='page-meta'>
  <div id='title'>Plugins - Moment</div>
  <div id='post-date'>02/05/2022</div>
  <div id='update-date'>02/05/2022</div>
  <div id='excerpt'>How to use momentjs plugin with Tempus Dominus.</div>
  <div id='tags'>datepicker, javascript, open source, tempus dominus, eonasdan</div>
</div>
